const pageSize = 5; //规定每页请求5条数据
let currentPage = 1; //当前页数
var picArr = [];
getProducts(currentPage);
getSecondCate();
//获取商品列表
function getProducts(currentPage) {
  $.ajax({
    url: "/product/queryProductDetailList",
    data: {
      page: currentPage,
      pageSize: pageSize
    },
    dataType: "json",
    success: function (res) {
      $(".common-table tbody").html(template("tmp_table", res));
      currentPage = res.page;
      let totalPages = Math.ceil(res.total / res.size);
      setPage(totalPages);
      //   getProducts(res.total);
    }
  });
}
function setPage(totalPages) {
  $("#paginator").bootstrapPaginator({
    // 指定bootstrap版本
    bootstrapMajorVersion: 3,
    // 当前页
    currentPage: currentPage,
    // 总页数
    totalPages: totalPages,

    // 当页面被点击时触发
    onPageClicked: function (a, b, c, page) {
      currentPage = page;
      getProducts(page);
    }
  });
}
// 请求二级分类数据
function getSecondCate() {
  $.ajax({
    url: "/category/querySecondCategoryPaging",
    data: {
      page: 1,
      pageSize: 1000
    },
    dataType: "json",
    success: function (res) {
      $("#secondCateMenu").html(template("tmp_select", res));
    }
  });
}
// 添加商品
function addProduct() {
  let params = $("#productAddForm").serialize();
  params += `&picArr=${JSON.stringify(picArr)}`;
  $.ajax({
    url: "/product/addProduct",
    type: "post",
    data: params,
    success: function (res) {
      resetForm();
      if (res.success) {
        getProducts(currentPage);
      } else {
        alert("新增失败");
      }
    }
  });
}
//表单验证
// 配置校验字段
const fields = {
  // 二级分类id, 归属品牌
  brandId: {
    validators: {
      notEmpty: {
        message: "请选择二级分类"
      }
    }
  },
  // 商品名称
  proName: {
    validators: {
      notEmpty: {
        message: "请输入商品名称"
      }
    }
  },
  // 商品描述
  proDesc: {
    validators: {
      notEmpty: {
        message: "请输入商品描述"
      }
    }
  },
  // 商品库存
  // 要求: 必须是非零开头的数字, 非零开头, 也就是只能以 1-9 开头
  // 数字: \d
  // + 表示一个或多个
  // * 表示零个或多个
  // ? 表示零个或1个
  // {n} 表示出现 n 次
  num: {
    validators: {
      notEmpty: {
        message: "请输入商品库存"
      },
      //正则校验
      regexp: {
        regexp: /^[1-9]\d*$/,
        message: "商品库存格式, 必须是非零开头的数字"
      }
    }
  },
  // 尺码校验, 规则必须是 32-40, 两个数字-两个数字
  size: {
    validators: {
      notEmpty: {
        message: "请输入商品尺码"
      },
      //正则校验
      regexp: {
        regexp: /^\d{2}-\d{2}$/,
        message: "尺码格式, 必须是 32-40"
      }
    }
  },
  // 商品价格
  price: {
    validators: {
      notEmpty: {
        message: "请输入商品价格"
      },
      regexp: {
        regexp: /^[0-9]+(.[0-9]{2})?$/,
        message: "价格必须为数字，若有小数，必须精确到小数点后两位，如9.99"
      }
    }
  },
  // 商品原价
  oldPrice: {
    validators: {
      notEmpty: {
        message: "请输入商品原价"
      },
      regexp: {
        regexp: /^[0-9]+(.[0-9]{2})?$/,
        message: "价格必须为数字，若有小数，必须精确到小数点后两位，如9.99"
      }
    }
  },
  // 标记图片是否上传满三张
  picStatus: {
    validators: {
      notEmpty: {
        message: "请上传3张图片"
      }
    }
  }
};

const vaild = new Vaild($("#productAddForm"), fields, addProduct, resetForm);
const vaildator = vaild.getValidator();
//添加商品选择二级分类
$("#secondCateMenu").on("click", "li>a", function () {
  $("#dropdownMenu1").text($(this).text());
  $("#secondCateIdInput").val($(this).attr("data-id"));
});
//上传图片，必须三张
//上传图片到服务器
$("#logoUploadFile").fileupload({
  dataType: "json",
  //e：事件对象
  //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
  done: function (e, data) {
    let result = data.result;

    picArr.unshift(result);
    // 新的图片, 应该添加到 imgBox 最前面去
    $("#imgBox").prepend('<img src="' + result.picAddr + '" width="100">');
    if (picArr.length == 3) {
      //修改验证状态为通过
      vaildator.updateStatus("picStatus", "VALID", "notEmpty");
    } else if (picArr.length < 3) {
      //修改验证状态为不通过
      vaildator.updateStatus("picStatus", "INVALID", "notEmpty");
    } else {
      //去除最后一张图片
      picArr.pop();
      // 通过 last-of-type 找到imgBox盒子中最后一个 img 类型的标签, 让他自杀
      $("#imgBox img:last-of-type").remove();
    }
  }
});
//重置表单
function resetForm() {
  $("#productAddForm")[0].reset();
  $("#dropdownMenu1").text("请选择二级分类");
  $("#secondCateIdInput").val("");
  picArr = [];
  // 删除结构中的所有图片
  $("#imgBox img").remove();
  $(".modal-productAdd").modal("hide");
}
